import React from 'react';
import style from './index.less';
import { MyIcon } from '../../my-icon';
import { pageSealDefaultSize } from './form';

function getSignFromImageData(formData) {
  return formData?.data?.sealData;
}

class PagingSeal extends React.Component {
  constructor() {
    super();

    this.formRef = React.createRef();
    this.canvasRef = React.createRef();
    this.deleteRef = React.createRef();
  }

  componentDidMount() {
    this.formRef.current.addEventListener('touchstart', this.onTouchStart, { passive: false });
    this.deleteRef.current.addEventListener('touchstart', this.onClickEditorCancel, {
      passive: false,
    });
  }

  onTouchStart = e => {
    e.stopPropagation();
    e.preventDefault();

    const { formData } = this.props;
    let scale = this.props.scale || 1;
    const { direction, docHeight } = formData;
    let el = this.formRef.current;
    if (!el) return;
    let startTouch = e.targetTouches[0];
    if (!startTouch) return;

    const startX = startTouch.clientX;
    const startY = startTouch.clientY;
    const leTop = parseInt(el.style.top);

    const onTouchMove = e => {
      e.preventDefault();
      let targetTouch = e.targetTouches[0];
      const endX = targetTouch.clientX;
      const endY = targetTouch.clientY;
      switch (direction) {
        case 'RIGHT' || 'LEFT':
          el.style.top = leTop + endY - startY + 'px';
          if (parseInt(el.style.top) < 0) {
            el.style.top = 0;
          }
          if (parseInt(el.style.top) + pageSealDefaultSize.height * scale > docHeight) {
            el.style.top = parseInt(docHeight - pageSealDefaultSize.height * scale) + 'px';
          }
          break;
      }
    };

    const onTouchEnd = e => {
      e.preventDefault();
      if (this.props.onUpdateFormPostion) {
        switch (direction) {
          case 'RIGHT' || 'LEFT':
            this.props.formData.offset = el.style.top; // FIXME: 非常规修改属性值
            break;
        }
        this.props.onUpdateFormPostion(
          this.props.formData,
          el.getBoundingClientRect(),
          this.props.formData.docId,
          parseInt(el.style.top)
        );
      }

      this.setState({
        draging: false,
      });
      window.removeEventListener('touchmove', onTouchMove, { passive: false });
      window.removeEventListener('touchend', onTouchEnd, { passive: false });
    };

    window.addEventListener('touchmove', onTouchMove, { passive: false });
    window.addEventListener('touchend', onTouchEnd, { passive: false });
  };

  onClickEditorCancel = e => {
    e.stopPropagation();
    e.preventDefault();

    let moved = false;

    let startTouch = e.targetTouches[0];
    const { clientX: startX, clientY: startY } = startTouch;

    const onTouchEndCancel = e => {
      e.stopPropagation();
      e.preventDefault();

      let endTouch = e.changedTouches[0];
      const { clientX: endX, clientY: endY } = endTouch;

      if ((endX - startX) ** 2 + (endY - startY) ** 2 > 8) moved = true;
      if (!moved) {
        this.props.onDelete && this.props.onDelete();
      }

      window.removeEventListener('touchend', onTouchEndCancel, { passive: false });
    };

    window.addEventListener('touchend', onTouchEndCancel, { passive: false });
  };

  render() {
    let scale = this.props.scale || 1;
    const { formData, cutPagingSealMsg } = this.props;
    const { direction, docHeight, offset } = formData;
    const { cutNums, currentCut } = cutPagingSealMsg;

    let containerStyle = {
      width: parseInt(pageSealDefaultSize.width * scale) + 'px',
      height: parseInt(pageSealDefaultSize.height * scale) + 'px',
    };

    switch (direction) {
      case 'RIGHT':
        containerStyle.right = 0;
        containerStyle.top = offset * scale + 'px';
    }

    const canvasStyle = {
      right: (containerStyle.right =
        parseInt((pageSealDefaultSize.width * scale * (cutNums - 1)) / cutNums) * -1 + 'px'),
      width: parseInt(pageSealDefaultSize.width * scale) + 'px',
      height: docHeight + 'px',
    };

    let imageData = getSignFromImageData(formData);
    return (
      <>
        <canvas ref={this.canvasRef} className={style.canvasStyle} style={canvasStyle}>
          不支持
        </canvas>
        <div ref={this.formRef} className={style.formContainer} style={containerStyle}>
          <img src={imageData} className={style.imageBox} alt={imageData} />
          <div ref={this.deleteRef} className={style.deleteHandler}>
            <MyIcon type="iconClose" className={style.icon}></MyIcon>
          </div>
        </div>
      </>
    );
  }
}

export { PagingSeal };
